<template>
  <div class="app-container">
    <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData" >

      <template slot="blank_1540524435000_7538" slot-scope="scope">
        <!-- 票据金额 -->
        <!-- 通过 v-model="scope.model.blank_1540524435000_7538" 绑定数据 -->
        <el-col :span="6"><el-input v-model="input1" placeholder=""/></el-col>
        <el-col :span="3" style="text-align:center;">到</el-col>
        <el-col :span="6"><el-input v-model="input2" placeholder=""/></el-col>
      </template>

      <template slot="blank_1540524482000_25829" slot-scope="scope">
        <!-- 出票日期从 -->
        <!-- 通过 v-model="scope.model.blank_1540524482000_25829" 绑定数据 -->
        <div class="block">
          <el-date-picker
            v-model="scope.model.blank_1540524482000_25829"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
        </div>
      </template>

      <template slot="blank_1540524492000_505" slot-scope="scope">
        <!-- 到期日期从 -->
        <!-- 通过 v-model="scope.model.blank_1540524492000_505" 绑定数据 -->
        <div class="block">
          <el-date-picker
            v-model="scope.model.blank_1540524492000_505"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
        </div>
      </template>

    </generate-form>
    <div class="generate-block">
      <el-button type="primary" @click="handleSubmit">查询</el-button>
      <el-button type="primary">重置</el-button>
    </div>
    <generate-table ref="generateTable" :data="jsonDataTable" :remote="remoteFuncs" :value="editData">
      <!--自定义新增编辑页面内容-->
      <!--<template slot="table_dialog" slot-scope="scope">-->
      <!--<generate-form :ref="scope.form" :data="jsonData" :remote="remoteFuncs" :value="scope.data"/>-->
      <!--</template>-->
    </generate-table>
    <div class="generate-block">
      <router-link to="/PrivateLibrary/BillManagement/PayableManagement/Billing/Register/ManualRegistration">
        <el-button type="primary">登记新票据</el-button>
      </router-link>
      <router-link to="/PrivateLibrary/BillManagement/PayableManagement/Billing/Register/ImportBill">
        <el-button type="primary">导入票据</el-button>
      </router-link>
      <el-button type="primary">批量提交</el-button>
      <el-button type="primary">删除票据</el-button>
      <el-button type="primary">导出excel</el-button>
    </div>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      input: '',
      value1: '',
      input1: '',
      input2: '',
      jsonData: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '票据类型', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'BillingType' }, 'key': '1540524209000_43888', 'model': 'select_1540524209000_43888', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '开票单位', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540524242000_59740' }, 'key': '1540524242000_59740', 'model': 'input_1540524242000_59740', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540524207000_40168' }, 'key': '1540524207000_40168', 'model': 'grid_1540524207000_40168', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '票据号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540524318000_26843' }, 'key': '1540524318000_26843', 'model': 'input_1540524318000_26843', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '收票人', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540524339000_56916' }, 'key': '1540524339000_56916', 'model': 'input_1540524339000_56916', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540524253000_78734' }, 'key': '1540524253000_78734', 'model': 'grid_1540524253000_78734', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '开出方式', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'OpenWay' }, 'key': '1540524352000_94429', 'model': 'select_1540524352000_94429', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'blank', 'name': '票据金额', 'icon': 'chalkboard', 'options': { 'defaultType': 'String', 'remoteFunc': 'func_1540524435000_7538' }, 'key': '1540524435000_7538', 'model': 'blank_1540524435000_7538', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540524345000_50165' }, 'key': '1540524345000_50165', 'model': 'grid_1540524345000_50165', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'blank', 'name': '出票日期从', 'icon': 'chalkboard', 'options': { 'defaultType': 'String', 'remoteFunc': 'func_1540524482000_25829' }, 'key': '1540524490000_99428', 'model': 'blank_1540524482000_25829', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'blank', 'name': '到期日期从', 'icon': 'chalkboard', 'options': { 'defaultType': 'String', 'remoteFunc': 'func_1540524492000_505' }, 'key': '1540524492000_505', 'model': 'blank_1540524492000_505', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540524470000_93686' }, 'key': '1540524470000_93686', 'model': 'grid_1540524470000_93686', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '承兑人', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540524578000_70895' }, 'key': '1540524578000_70895', 'model': 'input_1540524578000_70895', 'rules': [] }] }, { 'span': 10, 'list': [] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540524563000_20503' }, 'key': '1540524563000_20503', 'model': 'grid_1540524563000_20503', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }, 'table': { 'showRemove': false, 'showIndexCol': false, 'showEdit': false, 'showExport': false, 'showAdd': false, 'stripe': true, 'border': true }},
      jsonDataTable: {
        'list': [
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '票据号码',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1540534478000_10920'
                    },
                    'key': '1540534478000_10920',
                    'model': 'input_1540534478000_10920',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '承兑单位',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1540534494000_50912'
                    },
                    'key': '1540534494000_50912',
                    'model': 'input_1540534494000_50912',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1540534476000_661'
            },
            'key': '1540534476000_661',
            'model': 'grid_1540534476000_661',
            'rules': []
          },
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '票据金额',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'number',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1540534515000_77805'
                    },
                    'key': '1540534515000_77805',
                    'model': 'input_1540534515000_77805',
                    'rules': [
                      {
                        'type': 'number',
                        'message': '票据金额格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'date',
                    'name': '出票日期',
                    'icon': 'regular/calendar-alt',
                    'options': {
                      'defaultValue': '',
                      'readonly': false,
                      'disabled': false,
                      'editable': true,
                      'clearable': true,
                      'placeholder': '',
                      'startPlaceholder': '',
                      'endPlaceholder': '',
                      'type': 'date',
                      'format': 'yyyy-MM-dd',
                      'timestamp': false,
                      'required': false,
                      'width': '100%',
                      'remoteFunc': 'func_1540534838000_39915'
                    },
                    'key': '1540534838000_39915',
                    'model': 'date_1540534838000_39915',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1540534514000_79455'
            },
            'key': '1540534514000_79455',
            'model': 'grid_1540534514000_79455',
            'rules': []
          },
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'date',
                    'name': '到期日期',
                    'icon': 'regular/calendar-alt',
                    'options': {
                      'defaultValue': '',
                      'readonly': false,
                      'disabled': false,
                      'editable': true,
                      'clearable': true,
                      'placeholder': '',
                      'startPlaceholder': '',
                      'endPlaceholder': '',
                      'type': 'date',
                      'format': 'yyyy-MM-dd',
                      'timestamp': false,
                      'required': false,
                      'width': '100%',
                      'remoteFunc': 'func_1540534923000_85111'
                    },
                    'key': '1540534923000_85111',
                    'model': 'date_1540534923000_85111',
                    'rules': []
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'select',
                    'name': '种类',
                    'icon': 'regular/caret-square-down',
                    'options': {
                      'defaultValue': '',
                      'multiple': false,
                      'disabled': false,
                      'clearable': false,
                      'placeholder': '',
                      'required': false,
                      'showLabel': false,
                      'width': '100%',
                      'options': [
                        {
                          'value': '下拉框1'
                        },
                        {
                          'value': '下拉框2'
                        },
                        {
                          'value': '下拉框3'
                        }
                      ],
                      'remote': false,
                      'remoteOptions': [],
                      'props': {
                        'value': 'value',
                        'label': 'label'
                      },
                      'remoteFunc': 'func_1540534943000_13707'
                    },
                    'key': '1540534943000_13707',
                    'model': 'select_1540534943000_13707',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1540534845000_29760'
            },
            'key': '1540534845000_29760',
            'model': 'grid_1540534845000_29760',
            'rules': []
          },
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '开票协议号',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1540534957000_24611'
                    },
                    'key': '1540534957000_24611',
                    'model': 'input_1540534957000_24611',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '收款单位全称',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1540534975000_38929'
                    },
                    'key': '1540534975000_38929',
                    'model': 'input_1540534975000_38929',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1540534950000_90606'
            },
            'key': '1540534950000_90606',
            'model': 'grid_1540534950000_90606',
            'rules': []
          }
        ],
        'config': {
          'labelWidth': 100,
          'labelPosition': 'right'
        },
        'table': {
          'showRemove': false,
          'showIndexCol': false,
          'showEdit': true,
          'showExport': false,
          'showAdd': false,
          'stripe': true,
          'border': true
        }
      },
      editData: {},
      values: {},
      remoteFuncs: {

        BillingType(resolve) {
          // 票据类型 select_1540524209000_43888
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('票据类型').then(response => { resolve(response.data) })
        },

        OpenWay(resolve) {
          // 开出方式 select_1540524352000_94429
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('开出方式').then(response => { resolve(response.data) })
        }

      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
